<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>{{obj.a}}----{{obj.b}}</p>
        <p>
            <button @click="addA">a++</button>
            <button @click="addB">b++</button>
            <button @click="reset">reset</button>
        </p>
        <hr>
        <p>
            {{zhang.name}}----{{zhang.age}}----{{zhang.info.height}}----{{zhang.info.weight}}
        </p>
        <p>
            <button @click="changeName">changeName</button>
            <button @click="changeAge">changeAge</button>
            <button @click="changeHeight">changeHeight</button>
        </p>
    </div>
</body>
<script>

    // 组合式 API 的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题

    let { createApp } = Vue;
    let { ref, reactive, shallowReactive, readonly, shallowReadonly } = Vue;


    let app = createApp({
        setup(props) {

            // ref()  => 创建一个对"值类型"数据的引用,返回一个ref对象 (存 对象类型 也可以, 可以通过.value获取修改对象)
            // 注意:
            // 1. setup函数中对ref对象取值和赋值 依赖于.value属性
            // 2. 代理对象中 / template中 ref对象会被解包 => 直接使用变量即可
            // 3. ref() 也可以存对象类型, 此时Vue响应式对ref数据的数据拦截是深层的(可以检测value值是否改变,也可以检测子对象上属性是否改变 => 触发视图更新)


            // reactive()  创建一个对'对象'数据的引用 返回一个对象的响应式代理。(只能获取修改代理对象的子属性)

            // Vue响应式检测reactive()创建的响应式代理数据时是深层的(可以检测根对象及其子对象的属性改变)
            // Vue响应式检测shallowReactive()创建的响应式代理数据时是浅层的(只检测根对象改变)

            // readonly() 可以接收ref对象,reactive代理对象 => 返回一个原值的只读代理 => 这个检测默认也是深层的
            // shallowReadonly() 可以接收ref对象,reactive代理对象 => 返回一个原值的只读代理 => 这个检测默认也是浅层的(ref对象只有value值是只读的, reactive代理对象 => 根属性是只读的)

            let obj = ref({ a: 1, b: 2 });   // {value:{a:1,b:2}}
            // obj = readonly(obj);  
            obj = shallowReadonly(obj);  
            console.log(obj);


            let zhang = reactive({ name: "张三", age: 18, info: { height: 177, weight: 70 } });
            // zhang = readonly(zhang);
            zhang = shallowReadonly(zhang);
            console.log("zhang", zhang);
            console.log("zhang.info", zhang.info);


            let addA = () => {
                obj.value.a++
                console.log(obj.value.a);
            }
            let addB = () => {
                obj.value.b++
                console.log(obj.value.b);
            }
            let reset = () => {
                obj.value = { a: 10, b: 20 };
            }



            let changeName = () => {
                zhang.name = "李四"
            }

            let changeAge = () => {
                zhang.age++
            }

            let changeHeight = () => {
                zhang.info.height++
            }

            return {
                obj: obj,
                addA: addA,
                addB: addB,
                reset: reset,

                zhang,
                changeName,
                changeAge,
                changeHeight,
            }
        },
        mounted() {
            console.log("代理对象,this", this);

            /*  new Proxy({},{
                 // count
                 get(){
                     // 判断是否是ref对象  => ref.value
                 },
                 set(){
                     // 判断是否是ref对象   => ref.value = xxx
                 }
             }) */
        },
    })


    app.mount("#app");


</script>

</html>